<template>
	<view class="container">
		<view class="main">
			<view class="list flex">
				<view class="left">收货人</view>
				<view class="right flex flex-align">
					<input type="text" placeholder="请输入真实姓名" v-model="name" @blur="get_int">
				</view>
			</view>
			<view class="list flex">
				<view class="left">手机号码</view>
				<view class="right flex flex-align">
					<input type="number" placeholder="请输入手机号码" v-model="mobile" @blur="get_int">
				</view>
			</view>
			<view class="list flex">
				<view class="left">所在地区</view>
				<view class="right flex flex-align">
					<!-- <input disabled type="text" placeholder-class="line" name="city" @blur="get_int" v-model="textquyu" @click="showMulLinkageThreePicker" placeholder="省市区县、乡镇等"/> -->
					<view class="" @click="showMulLinkageThreePicker" style="width: 100%;height: 70rpx;">{{textquyu}}</view>
					
				</view>
			</view>
			<view class="list flex">
				<view class="left">详细地址</view>
				<view class="right flex flex-align">
					<textarea v-model="county" @blur="get_int" placeholder="请输入详细地址"></textarea>
				</view>
			</view>
		</view>
		<view class="main" style="margin-top: 30rpx;">
			<view class="shibie">
				<view class="left">智能识别</view>
				<view class="right flex flex-align">
					<textarea v-model="shibie_address" placeholder="粘贴或输入整段地址，点击【识别】自动拆分 收货人，电话，地址，例如张三，132****88 88，浙江省杭州市西湖区**街道*" @blur="huo_address"></textarea>
				</view>
			</view>
		</view>
		<view class="main" style="margin-top: 30rpx;">
			<view class="lists flex flex-align flex-bt">
				<view class="left flex flex-align">
					<view class="set">设置默认地址</view>
					<view class="tips grey">(每次下单时默认使用)</view>
				</view>
				<view class="right"><switch color="#bbe68c" @change="setDefault" :checked="is_xuan" /></view>
			</view>
		</view>
		<view class="btn tijiao" :class="is_hei?'black':''"  @click="get_add">保存</view>
		<mpvue-city-picker themeColor="#333" ref="mpvueCityPicker"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>
<script>
	import AddressParse from '../../js_sdk/wonday-address-parse/dist/zh-address-parse.min.js'
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
		export default {
			components: {
			mpvueCityPicker
		},
		data() {
			return {
				title: 'Hello',
				name:'',
				id_card:'',
				bank_num:'',
				index:0,
				mobile:'',
				yzm:'',
				province:'',
				city:'',
				county:'',
				area:'',
				textquyu:'省市区县、乡镇等',
				shibie_address:'',
				is_xuan:false,
				isDefault:0,
				is_hei:false,
				code:''
			}
		},
		onLoad(e) {
			let that = this
			if(e.data){
				let data = JSON.parse(e.data)
				console.log(data)
				that.name = data.name
				that.city = data.city
				that.area = data.area
				that.province = data.province
				that.county = data.address
				that.mobile = data.phone
				that.isDefault = data.type
				that.textquyu = that.province+that.city+that.area
				that.code = data.code
				if(data.type==1){
					that.is_xuan = true
				}else{
					that.is_xuan = false
				}
				uni.setNavigationBarTitle({
					title: '修改收货地址'
				})
			}
		},
		methods: {
			go_url(e){
				console.log(e)
				let that = this
				that.tui.href(e)
			},
			get_int(){
				if(this.name==''||this.mobile==''||this.textquyu==''||this.county==''){
					this.is_hei = false
				}else{
					this.is_hei = true
				}
			},
			huo_address(){
				let that = this
				if(that.shibie_address==''){
					return false
				}
				let parseResult = AddressParse(that.shibie_address, 0)
				that.name = parseResult.name
				that.province = parseResult.province
				that.city = parseResult.city
				that.area = parseResult.area
				that.textquyu = that.province + that.city +　that.area
				that.mobile = parseResult.phone
				that.county = parseResult.detail
				console.log(parseResult)
			},
			setDefault(e) {
				this.is_xuan = e.detail.value
				if(this.is_xuan){
					this.isDefault = 1
				}else{
					this.isDefault = 0
				}
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onBackPress() {
			  if (this.$refs.mpvueCityPicker.showPicker) {
			  	this.$refs.mpvueCityPicker.pickerCancel();
			    return true;
			  }
			},
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				console.log(e[0].province)
				let that = this
				that.province = e[0].province
				that.city = e[0].city
				that.area = e[0].area
				that.textquyu = e[0].province+e[0].city+e[0].area
			},
			get_add(){
				let that = this
				if(!that.is_hei){
					that.tui.toast('请完善信息')
					return false
				}
				let data = {type:that.isDefault,name:that.name,phone:that.mobile,province:that.province,city:that.city,area:that.area,address:that.county,code:that.code}
				that.tui.request("api.auth.address/set", "post", data, false, true, true).then((res) => {
					that.tui.toast('添加成功')
					setTimeout(function(){
						uni.navigateBack()
					},1500)
				}).catch((res) => {})
				
			},
		}
	}
</script>

<style lang="scss">
	page{background: #f5f5f5;}
	.btn{background: #bbe68c;color: #fff;text-align: center;line-height: 90rpx;}
	.grey{color: #b3b3b3;}
	.main{padding: 0 40rpx;background: #fff;
		.list{border-bottom: 1px solid #eee;padding: 60rpx 0 30rpx;
			.left{width: 150rpx;}
			.right{width: 550rpx;
				input{width: 100%;}
			}
			.uni-input{padding:0 6rpx;}
			.right{
				textarea{width: 500rpx;padding: 4rpx 0;height: 150rpx;font-size: 26rpx;}
				input{font-size: 26rpx;}
			}
			.liquan{border-radius: 40rpx;border: 1px solid #333;padding: 0 20rpx;font-size: 24rpx;}
		}
		.list:last-child{border-bottom: none;}
		.shibie{padding: 30rpx 0rpx;
			.right{
				textarea{background: #f8f8f8;width: 92%;padding: 30rpx;margin-top: 20rpx;height: 150rpx;border-radius: 10rpx;font-size: 28rpx;}
			}
		}
		.lists{padding: 30rpx 0;
			.tips{margin-left: 10rpx;font-size: 24rpx;}
		}
	}
	.tijiao{margin: 60rpx 40rpx;}
	.tijiao.black{background: #bbe68c;}
</style>